.marknote-menus {
  --menuShadowColor:var(--menuShadowColor);
  position: absolute;;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --menu2Top:-4px;
  --borderRadius: 4px;
  .marknote-menu-mask {
    width: 100%;
    height: 100%;
    z-index: 990;
    position: absolute;
  }


  .menus{
    background-color: var(--menuBackgroundColor, #fff);
    color: var(--menuTextColor,#202124);
    // box-shadow: 2px 2px 13px var(--menuShadowColor,#b8b8b8);
    // border: 1px solid var(--menuShadowColor);
    border-radius: var(--borderRadius);
    border: 1px solid var(--menuBorderColor);
    &.glass{
      // background-color: rgba(255, 255, 255, 0.4);
      background-color: transparent;
      // backdrop-filter: blur(10px);
      // -webkit-backdrop-filter: blur(4px);
      &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-color: var(--menuBackgroundColorGlass);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
      }
    }
  }

  .menus-level-1 {
    font-size: 14px;
    top: 20px;
    left: var(--titleBarHeight);
    width: 100px;
    position: absolute;
    z-index: 99998;
    .menu-title{
      user-select: none;
      --webkit-user-select: none;
    }

    

    &.right-menu{
      left: auto;
      right: var(--titleBarHeight);
    }

    .menu-item {
      user-select:none;
      .menu-content {
        padding: .2rem .4rem .2rem .6rem;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        user-select: none;
        &:hover {
          background-color: var(--menuBackgroundColorHover, #e8e8e9);
        }
      }

      
      &.split{
        border-bottom: 1px solid var(--menuBorderColor,#dfdfdf);
      }
    }

    .menus-level-2 {
      position: absolute;
      top: var(--menu2Top);
      left: 95px;
      width: 250px;
      margin-top: .4rem;
      z-index: 9998;
      &.right-menu{
        left: auto;
        right: 95px;
      }

      .menu-content {
        padding: .2rem .6rem;
        display: flex;

        &:hover {
          background-color: var(--menuBackgroundColorHover, #e8e8e9);
        }
        


        &>label.menu-checkbox {
          width: 30px;
          input{
            visible:false;
            &:checked{
              visible:true;
            }
          }
          
        }

        &>label.menu-title {
          width: 100px;
        }

        &>span {
          flex: 1;
          color: #ccc;
          text-align: right;
        }
        &>i{
          width: 20px;
          text-align: right;
        }
      }

      .menus-level-3{
        position: absolute;
        top: var(--menu3Top);
        left: 245px;
        width: 200px;
        margin-top: .4rem;
        z-index: 9999;
        .menu-item{
          
          .menu-title{
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        &.right-menu{
          left: auto;
          right: 245px;
        }
      }

    }
  }
}